<template id="cld">
  <div>
    <div class="calender">
      <div class="topBar">
        <div class="preMonth"  @click="handlePrev">
          <span><</span>
        </div>
        <div class="centerDate" >{{ year }}年{{ month }}月{{ day }}日</div>
        <div class="nextMonth" @click="handleNext">
          <span>></span>
        </div>
      </div>
      <div class="date">
        <div class="weekHeader">
          <div 
            v-for="item in ['日','一','二','三','四','五','六']"
            :key= item
          >{{ item }}</div>
        </div>
        <div>
          <div 
            class="everyDay"
            v-for="item in 42"
            :key="item"
          >
            <div @click="dayClick(item-beginDay)"
              :class="[activeindex === item-beginDay ? 'activeDay' : '',
               today === item - beginDay + '' + month + year ? 'curDay' : '']"
              v-if="item - beginDay > 0 && item - beginDay <= curDays"
              >{{ item - beginDay }}</div>
            <div 
              class="otherDay" 
              v-else-if="item - beginDay <= 0"
              >{{ item - beginDay + prevDays }}</div>
            <div 
              class="otherDay" 
              v-else>{{ item - beginDay -curDays }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default {
    data() {
      return {
        year:null,
        month:null,
        day:null,
        today:'',
        activeindex:-1,
      }
    },
    created() {
      this.getCurrentTime();
      this.getToday();
    },
    methods: {
      getCurrentTime() {
        const date = new Date();
        this.year = date.getFullYear();
        this.month = date.getUTCMonth() + 1;
        this.day = date.getDate();
      },
      handlePrev() {
        if(this.month == 1){
          this.month = 12;
          this.year--;
        }else{
          this.month--;
        }
      },
      handleNext() {
        if(this.month == 12){
          this.month = 1;
          this.year++;
        }else{
          this.month++;
        }
      },
      getToday() {
        this.today = this.day + '' +this.month + this.year;
      }
      ,
      dayClick(item) {
        this.activeindex = item;
        this.day = item;
      }
    },
    computed: {
      // 获取当前月份1号是星期几
      beginDay() {
        return new Date(this.year, this.month - 1, 1).getDay();
      },
      // 获取当前月份有多少天
      curDays() {
        return new Date(this.year, this.month,0).getDate();
      },
      // 获取前一个月份有多少天
      prevDays() {
        return new Date(this.year, this.month-1,0).getDate();
      },
    }
  }
</script>
<style type="text/css">
  *{
      user-select: none;
  }
  .calender{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      height:410px;
      width:420px;
      background-color: #daeee5;
      border-radius: 3%;
      box-shadow:20px 20px 20px black;
  }
  .topBar{
      margin-left: 10px;
      height: 50px;
      width: 350px;
      line-height: 50px;
      text-align: center;
  }
  .preMonth{
      position: absolute;
      display: inline-block;
      height: 50px;
      width:50px;
  }
  .nextMonth{
      position: absolute;
      display: inline-block;
      height: 50px;
      width:50px;
  }
  .centerDate{
      margin-left: 40px;
      margin-top: 0px;
      display: inline-block;
      line-height: 50px;
      text-align: center;
      font-size: 20px;
      width: 310px;
  }
  .weekHeader{
      font-size: 14px;
      text-align: center;
      line-height: 50px;
      border-top: 2px solid #c3ddd0;
  }
  .weekHeader div{
      margin: 0;
      padding: 0;
      display: inline-block;
      height: 20px;
      width: 60px;
  }
  .date{
    width: auto;
    height: auto;
  }
  .everyDay{
      display: inline-block;
      height: 50px;
      width: 60px;
      text-align: center;
      line-height: 50px;
  }
  .otherDay{
      color: #ccc;
  }
  .curDay{
      background: #c3ddd0;
      border-radius: 10%;
  }
  .everyDay>*{
    border: 2px solid transparent;
  }
  .activeDay{
      border: 2px solid #750101;
      border-radius: 10%;
  }
  .iconfont{
    font-size: 20px;
  }
  .reversion{
    display: inline-block;
    transform: rotate(180deg);
  }
</style>
		
